import { type VNode } from 'vue'
import { type PropsToForms } from '@/types/propsMap'

const defaultHandler = {
  component: 'a-input',
  eventName: 'change',
  valueProp: 'value',
  intialTransform: (v: any) => v,
  afterTransform: (e: any) => e
}

const fontFamilyArr = [
  { text: '宋体', value: '"SimSun","STSong"' },
  { text: '黑体', value: '"SimHei","STHeiti"' },
  { text: '楷体', value: '"KaiTi","STKaiti"' },
  { text: '仿宋', value: '"FangSong","STFangsong"' }
]

const fontFamilyOptions = fontFamilyArr.map((font) => {
  return {
    value: font.value,
    // text: h('span', { style: { fontFamily: font.value } }, font.text)
    text: (<span style={{ fontFamily: font.value }}>{font.text}</span>) as VNode
  }
})
export const mapPropsToForms: PropsToForms = {
  text: {
    text: '文本',
    component: 'a-textarea',
    extraProps: {
      rows: 3
    },
    afterTransform: (e: any) => e.target.value
  },
  fontSize: {
    ...defaultHandler,
    text: '字号',
    component: 'a-input-number',
    initalTransform: (v: string) => parseFloat(v),
    afterTransform: (e: number) => (e ? `${e}px` : '')
  },
  lineHeight: {
    text: '行高',
    component: 'a-slider',
    extraProps: { min: 0, max: 3, step: 0.1 },
    initalTransform: (v: string) => parseFloat(v),
    afterTransform: (e: number) => e.toString()
  },
  textAlign: {
    component: 'a-radio-group',
    subComponent: 'a-radio-button',
    text: '对齐方式',
    options: [
      { value: 'left', text: '左' },
      { value: 'center', text: '中' },
      { value: 'right', text: '右' }
    ],
    afterTransform: (e: any) => e.target.value
  },
  fontFamily: {
    component: 'a-select',
    subComponent: 'a-select-option',
    text: '字体',
    options: [
      { value: '', text: '无' },
      // { text: '宋体', value: '"SimSun","STSong"' },
      // { text: '黑体', value: '"SimHei","STHeiti"' },
      // { text: '楷体', value: '"KaiTi","STKaiti"' },
      // { text: '仿宋', value: '"FangSong","STFangsong"' }
      ...fontFamilyOptions
    ]
  },
  color: {
    component: 'color-picker',
    text: '字体颜色'
  }
}
